<template>
    <div class="index-box" v-loading="loading">
        <div v-if="showIndex" class="show-index">
            <div>
                <h3 class="title">首页布局</h3>
                <div class="tab-tools">
                    <span @click="showIndex = false">编辑布局</span>
                </div>
                <div class="draw-box">
                    <phone :scrollTop="phoneScroll" ref="phone" @scroll="scroll">
                        <div
                            v-for="(item, index) in dataList"
                            :key="index"
                        >
                            <div v-if="item.displayType === 1000">
                                <div class="remove-index-step update-index-step" v-if="item.channelid">
                                    <span @click="goChannelDetail(item.channelid)" style="color: #409EFF;margin-right:10px;">{{item.channelid}}</span>
                                    <span @click="addCancle(item, index)">更换频道</span></div>
                                <div class="remove-index-step" v-else><span @click="addCancle(item, index)">关联频道</span></div>
                                <model1000 :data="item"/>
                            </div>
                            <div v-else-if="item.displayType === 4100">
                                <div class="remove-index-step update-index-step" v-if="item.channelid">
                                    <span @click="goChannelDetail(item.channelid)" style="color: #409EFF;margin-right:10px;">{{item.channelid}}</span>
                                    <span @click="addCancle(item, index)">更换频道</span></div>
                                <div class="remove-index-step" v-else><span @click="addCancle(item, index)">关联频道</span></div>
                                <model4100 :data="item"/>
                            </div>
                            <div v-else-if="item.displayType === 8000">
                                <div class="remove-index-step update-index-step" v-if="item.channelid">
                                    <span @click="goChannelDetail(item.channelid)" style="color: #409EFF;margin-right:10px;">{{item.channelid}}</span>
                                    <span @click="addCancle(item, index)">更换频道</span></div>
                                <div class="remove-index-step" v-else><span @click="addCancle(item, index)">关联频道</span></div>
                                <model8000 :data="item"/>
                            </div>
                            <div v-else-if="item.displayType === 7000">
                                <div class="remove-index-step update-index-step" v-if="item.channelid">
                                    <span @click="goChannelDetail(item.channelid)" style="color: #409EFF;margin-right:10px;">{{item.channelid}}</span>
                                    <span @click="addCancle(item, index)">更换频道</span></div>
                                <div class="remove-index-step" v-else><span @click="addCancle(item, index)">关联频道</span></div>
                                <model7000 :data="item"/>
                            </div>
                            <div v-else-if="item.displayType === 2000">
                                <div class="remove-index-step update-index-step" v-if="item.channelid">
                                    <span @click="goChannelDetail(item.channelid)" style="color: #409EFF;margin-right:10px;">{{item.channelid}}</span>
                                    <span @click="addCancle(item, index)">更换频道</span></div>
                                <div class="remove-index-step" v-else><span @click="addCancle(item, index)">关联频道</span></div>
                                <model2000 :data="item"/>
                            </div>
                            <div v-else-if="item.displayType === 9000">
                                <!-- <div class="remove-index-step update-index-step" v-if="item.channelid">
                                    <span @click="goChannelDetail(item.channelid)" style="color: #409EFF;margin-right:10px;">{{item.channelid}}</span>
                                    <span @click="addCancle(item, index)">更换频道</span></div>
                                <div class="remove-index-step" v-else><span @click="addCancle(item, index)">关联频道</span></div> -->
                                <model9000 :data="item"/>
                            </div>
                            <div v-else-if="item.displayType === 3000">
                                <div class="remove-index-step update-index-step" v-if="item.channelid">
                                    <span @click="goChannelDetail(item.channelid)" style="color: #409EFF;margin-right:10px;">{{item.channelid}}</span>
                                    <span @click="addCancle(item, index)">更换频道</span></div>
                                <div class="remove-index-step" v-else><span @click="addCancle(item, index)">关联频道</span></div>
                                <model3000 :data="item"/>
                            </div>
                            <div v-else-if="item.displayType === 2100">
                                <div class="remove-index-step update-index-step" v-if="item.channelid">
                                    <span @click="goChannelDetail(item.channelid)" style="color: #409EFF;margin-right:10px;">{{item.channelid}}</span>
                                    <span @click="addCancle(item, index)">更换频道</span></div>
                                <div class="remove-index-step" v-else><span @click="addCancle(item, index)">关联频道</span></div>
                                <model2100 :data="item"/>
                            </div>
                            <div v-else-if="item.displayType === 4000">
                                <div class="remove-index-step update-index-step" v-if="item.channelid">
                                    <span @click="goChannelDetail(item.channelid)" style="color: #409EFF;margin-right:10px;">{{item.channelid}}</span>
                                    <span @click="addCancle(item, index)">更换频道</span></div>
                                <div class="remove-index-step" v-else><span @click="addCancle(item, index)">关联频道</span></div>
                                <model4000 :data="item"/>
                            </div>
                            <div v-else-if="item.displayType === 5000">
                                <div class="remove-index-step update-index-step" v-if="item.channelid">
                                    <span @click="goChannelDetail(item.channelid)" style="color: #409EFF;margin-right:10px;">{{item.channelid}}</span>
                                    <span @click="addCancle(item, index)">更换频道</span></div>
                                <div class="remove-index-step" v-else><span @click="addCancle(item, index)">关联频道</span></div>
                                <model5000 :data="item"/>
                            </div>

                            <div v-else-if="item.displayType === 10000">
                                <div class="remove-index-step update-index-step" v-if="item.channelid">
                                    <span @click="goChannelDetail(item.channelid)" style="color: #409EFF;margin-right:10px;">{{item.channelid}}</span>
                                    <span @click="addCancle(item, index)">更换频道</span></div>
                                <div class="remove-index-step" v-else><span @click="addCancle(item, index)">关联频道</span></div>
                                <model10000 :data="item"/>
                            </div>

                            <div v-else-if="item.displayType === 10100">
                                <div class="remove-index-step update-index-step" v-if="item.channelid">
                                    <span @click="goChannelDetail(item.channelid)" style="color: #409EFF;margin-right:10px;">{{item.channelid}}</span>
                                    <span @click="addCancle(item, index)">更换频道</span></div>
                                <div class="remove-index-step" v-else><span @click="addCancle(item, index)">关联频道</span></div>
                                <model10100 :data="item"/>
                            </div>

                            <div v-else-if="item.displayType === 10200">
                                <div class="remove-index-step update-index-step" v-if="item.channelid">
                                    <span @click="goChannelDetail(item.channelid)" style="color: #409EFF;margin-right:10px;">{{item.channelid}}</span>
                                    <span @click="addCancle(item, index)">更换频道</span></div>
                                <div class="remove-index-step" v-else><span @click="addCancle(item, index)">关联频道</span></div>
                                <model10200 :data="item"/>
                            </div>

                            <div v-else-if="item.displayType === 10300">
                                <div class="remove-index-step update-index-step" v-if="item.channelid">
                                    <span @click="goChannelDetail(item.channelid)" style="color: #409EFF;margin-right:10px;">{{item.channelid}}</span>
                                    <span @click="addCancle(item, index)">更换频道</span></div>
                                <div class="remove-index-step" v-else><span @click="addCancle(item, index)">关联频道</span></div>
                                <model10300 :data="item"/>
                            </div>

                            <div v-else>
                                <div class="remove-index-step update-index-step" v-if="item.channelid">
                                    <span @click="goChannelDetail(item.channelid)" style="color: #409EFF;margin-right:10px;">{{item.channelid}}</span>
                                    <span @click="addCancle(item, index)">更换频道</span></div>
                                <div class="remove-index-step" v-else><span @click="addCancle(item, index)">关联频道</span></div>
                            </div>
                        </div>
                    </phone>
                </div>
            </div>
            <div class="index-bottom-box" v-if="showCancle || showSave">
                <div class="cancle-btn"><span @click="notSave">取消</span></div>
                <div class="next-btn" @click="saveNewHomePage">保存</div>
            </div>
        </div>
        <div v-else class="index-edit">
            <editIndex @closeShowIndex="closeShowIndex" @changeData="changeData" :scroll="phoneScroll" :data="dataList" @changeScroll="changeScroll"/>
        </div>

        <el-dialog
            title="提示"
            :visible.sync="dialogVisible">
            <span>你还有操作未做保存，请问是否退出当前编辑，退出后当前编辑不可恢复！</span>
            <span slot="footer">
                <el-button @click="noGoBack">再看看</el-button>
                <el-button type="primary" @click="goback">离 开</el-button>
            </span>
        </el-dialog>

        <el-dialog
            class="bind-channel"
            title="关联频道"
            width="80%"
            :visible.sync="showList">
                <channelList v-if="showList" @checkList="checkList" :tableBox="dataList" :channelType="currentItem.displayType"/>
            <span slot="footer">
            </span>
        </el-dialog>
    </div>
</template>

<script>
import editIndex from './editIndex'
import channelList from '../channel/channelList'
export default {
    data () {
        return {
            dataList: [],
            currentList: [],
            phoneScroll: 0,
            currentItem: {},
            showIndex: true,
            dialogVisible: false, // 弹窗提示
            loading: true,
            showList: false,
            showSave: false
        }
    },
    created () {
        this.getDataList()
    },
    computed: {
        showCancle () {
            if (this.dataList.length !== this.currentList.length) {
                return true
            }
            for (let i = 0; i < this.dataList.length; i++) {
                if (!this.dataList[i].pageid) {
                    return true
                }
                if (this.dataList[i].pageid !== this.currentList[i].pageid) {
                    return true
                }
            }
            return false
        }
    },
    methods: {
        async getDataList () {
            let res = await this.$http.post('/home/homePage')
            if (res.code === '0') {
                res.data.forEach(item => {
                    if (!item.elements) {
                        item.elements = [{}]
                    }
                    if (item.displayType === 4000 || item.displayType === 4100) {
                        if (item.elements && item.elements.length) {
                            item._contentType = item.elements[0].type
                        }
                    }
                })
                console.log(res.data)
                this.dataList = res.data
                this.currentList = JSON.parse(JSON.stringify(this.dataList))
            } else {
                this.$message({
                    message: '系统繁忙，请稍后再试',
                    type: 'error'
                })
            }
            this.loading = false
        },

        scroll (scroll) {
            this.phoneScroll = scroll
        },

        // 关联频道
        addCancle (item, index) {
            this.currentItem = item
            this.currentIndex = index
            this.showList = true
        },

        // 选择关联的频道
        checkList (item) {
            this.dataList[this.currentIndex] = item
            this.showList = false
            this.showSave = true
        },

        // 保存首页布局
        async saveNewHomePage () {
            this.currentList = JSON.parse(JSON.stringify(this.dataList))
            let res = await this.$http.post('/home/updateHomePage', {
                channels: this.dataList
            })
            if (res.code === '0') {
                this.getDataList()
                // this.dataList = res.data
                // this.currentList = JSON.parse(JSON.stringify(this.dataList))
                this.$message({
                    type: 'success',
                    message: '修改成功'
                })
                this.showSave = false
            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
        },

        // 取消首页布局
        notSave () {
            this.dataList = JSON.parse(JSON.stringify(this.currentList))
        },

        goback () {
            this.routerFlag = true
            this.$router.push(this.goRouter)
        },

        noGoBack () {
            this.dialogVisible = false
        },

        /** 同编辑布局交互部分**/
        closeShowIndex () {
            this.showIndex = true
        },

        changeData (data) {
            this.dataList = data
        },

        // 改变滚动位置
        changeScroll (phoneScroll) {
            setTimeout(() => {
                this.phoneScroll = phoneScroll
            }, 100)
        },

        // 查看频道
        goChannelDetail (id) {
            this.$router.push({
                path: '/index/channelDetail',
                query: {
                    id
                }
            })
        }
    },
    components: {
        editIndex,
        channelList
    },
    beforeRouteLeave (to, from, next) {
        if (this.routerFlag) {
            next()
            return
        }
        if (this.showCancle || this.showSave) {
            this.goRouter = to.fullPath
            this.dialogVisible = true
        } else {
            next()
        }
    }
}
</script>

<style lang="scss" scoped>
    .index-box {
        .show-index {
            > div {
                width: 362px;
                margin: 0 auto;
                .title {
                    text-align: center;
                }
                .tab-tools {
                    display: flex;
                    justify-content: flex-end;
                    > span {
                        color: #409EFF;
                        font-size: 14px;
                        cursor: pointer;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
                .draw-box {
                    margin-top: 10px;
                    .remove-index-step {
                        padding: 10px 16px 0;
                        display: flex;
                        justify-content: flex-end;
                        > span {
                            color: #409EFF;
                            font-size: 14px;
                            cursor: pointer;
                            &:hover {
                                text-decoration: underline;
                            }
                        }
                    }
                    .update-index-step {
                        > span {
                            color: rgb(103, 194, 58);
                        }
                    }
                }
            }
            .index-bottom-box {
                width: 500px;
                margin: 0 auto;
                margin-top: 20px;
                display: flex;
                align-items: center;
                justify-content: space-around;
                .cancle-btn {
                    height: 35px;
                    width: 150px;
                    color: #F56C6C;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    > span {
                        &:hover {
                            text-decoration: underline;
                            cursor: pointer;
                        }
                    }
                }
                .next-btn {
                    background: #409EFF;
                    color: #ffffff;
                    border-radius: 10px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    height: 35px;
                    width: 150px;
                    cursor: pointer;
                    &:hover {
                        opacity: .8;
                    }
                }
            }
        }

        .index-edit {
        }
        .bind-channel {
            color: red;
            /deep/ .el-dialog__body {
                padding: 10px 20px;
            }
            /deep/ .el-dialog__footer {
                padding: 0;
            }
        }
    }
</style>
